﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>坐标转换测试</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
    <style>
        html, body, #main {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, gsvc;

        require(["dojo/parser", "esri/geometry/Extent", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/SpatialReference", "esri/tasks/GeometryService", "esri/geometry/webMercatorUtils", "esri/geometry/Point",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dojo/domReady!"],
            function (parser, Extent, Map, ArcGISTiledMapServiceLayer, SpatialReference, GeometryService, webMercatorUtils, Point) {
                parser.parse();

                map = new esri.Map("mapDiv");
                var layer = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
                map.addLayer(layer);
                map.setExtent(new Extent(-144.13, 7.98, -52.76, 68.89, new SpatialReference({ wkid: 4326 })));

                gsvc = new GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
                map.on("click", projectToWebMercator);

                function projectToWebMercator(evt) {
                    map.graphics.clear();

                    var point = evt.mapPoint;
                    var outSR = new SpatialReference({ wkid: 102113 });

                    // 利用webMercatorUtils模块转换坐标
                    var wm = webMercatorUtils.geographicToWebMercator(point);
                    // 利用我们自己的计算方法转换坐标
                    var we = toWebMercator(point);

                    gsvc.project([point], outSR, function (projectedPoints) {
                        pt = projectedPoints[0];
                        var desc1 = "通过服务得到的坐标:<br/>" + pt.x.toFixed(3) + ";" + pt.y.toFixed(3);
                        var desc2 = "功能函数计算的坐标:<br/>" + wm.x.toFixed(3) + ";" + wm.y.toFixed(3);
                        var desc3 = "自己函数计算的坐标:<br/>" + we.x.toFixed(3) + ";" + we.y.toFixed(3);
                        document.getElementById("spatialReference").innerHTML = desc1 + "<br/>" + desc2 + "<br/>" + desc3;
                    });
                }

                function toWebMercator(pt) {
                    var num = pt.x * 0.017453292519943295;
                    var x = 6378137.0 * num;
                    var a = pt.y * 0.017453292519943295;
                    var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));

                    return new Point({ "x": x, "y": y, "spatialReference": { "wkid": 102113 } });
                }
            });
    </script>
</head>
<body class="soria">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  id="main">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"  style="height: 60px;">
            <h3>功能：投影测试</h3>            
        </div>
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
        </div>
        <div id="spatialReference" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right', splitter:true" style="width:200px; border:1px solid #000;"></div>
    </div>
</body>
</html>